<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8" />
		<meta name="renderer" content="webkit" />
		<meta name="force-rendering" content="webkit" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
		/>
		<title>我的报名信息</title>
		<style type="text/css">
			#printTemplate {
				display: none;
			}

			.printPage {
				font-size: small;
			}

			.printPage .title {
				font-size: 16px;
				font-weight: bold;
				text-align: center;
				margin-bottom: 16px;
				color: black;
			}

			.printPage .table {
				width: 100%;
				border-collapse: collapse;
				border-spacing: 0;
			}

			.printPage .table th {
				background-color: #f0f0f0;
			}

			.printPage .table th,
			.printPage .table td {
				border: 1px solid #d9d9d9;
				width: 20%;
				height: 40px;
				text-align: center;
			}

			.printPage .table img {
				width: 100%;
			}

			.printPage .header {
				width: 100%;
				margin-bottom: 16px;
			}

			.printPage .header td {
				width: 50%;
			}

			.printPage .header input {
				width: 40%;
				border-bottom: 1px solid black;
			}

			.printPage .header span {
				border-bottom: 1px solid;
				padding: 0 4px;
			}

			.printPage .header label {
				margin: 0 8px;
			}

			.printPage .header span,
			.printPage .header label {
				font-size: 16px;
			}

			input {
				width: 100%;
				border: none;
				background-color: unset;
				text-align: center;
			}
		</style>
		<script type="text/javascript">
			var basicUrl = 'https://ndx2345.top:446/';
			var mappingStatus = {
				0: '尚未报名',
				1: '待审核',
				2: '审核通过',
				3: '审核拒绝',
				5: '交费成功',
			};
			var types = {
				1: '职教高考',
				2: '职业中专',
				3: '职业中专(3+2)',
				4: '技工',
				5: '技工(3+2)',
			};
			var situationMapping = ['应届', '往届'];
			var residTypeMapping = {
				140403: '潞州区',
				140404: '上党区',
				140405: '屯留区',
				140406: '潞城区',
				140423: '襄垣县',
				140425: '平顺县',
				140426: '黎城县',
				140427: '壶关县',
				140428: '长子县',
				140429: '武乡县',
				140430: '沁县',
				140431: '沁源县',
				0: '其它',
			};
			var mappingSpecial = {};
			var domTemp, domPages;
			window.onload = init;

			function init() {
				var errMsg = '';
				domTemp = document.getElementById('printTemplate');
				domPages = document.getElementById('printPages');
				if (!domTemp) errMsg = '未找到printTemplate';
				if (!errMsg && !domPages) errMsg = '未找到printPages';
				if (errMsg) {
					document.body.textContent = errMsg;
					return;
				}

				var result = funcGetSearch('token', true);
				if (result.err) {
					domPages.textContent = 'token不能为空';
					return;
				}

				var token = result.value;
				result = funcGetSearch('userId');
				if (result.err) {
					domPages.textContent = 'userId不能为空';
					return;
				}

				var userId = result.value;
				userId -= 0;

				domPages.textContent = '正在进行网络请求, 请稍候..';

				var params = {
					currentPage: 1,
					pageSize: 10000,
				};
				funcRequest('api/form/specialList', params, function(response) {
					if (!response.success) {
						domPages.textContent = response.msg;
						return;
					}

					response.root.map(function(item) {
						var id = item.id, name = item.name;
						mappingSpecial[id] = name;
					});

					params = {
						token: token,
						userId: userId,
					};
					funcRequest('api/user/info', params, funcMakeTable);
				});
			}

			// 网络请求
			function funcRequest(apiPath, params, callback) {
				fetch(basicUrl + apiPath, {
					method: 'post',
					body: JSON.stringify(params),
				})
					.then(response => response)
					.then(response => response.json())
					.then(response => {
						if (response.status === 1) {
							domPages.textContent = response.msg;
							return;
						}

						if (callback) callback(response);
					});
			}

			// 渲染数据
			function funcRender(data) {
				var ethnicData = [
				  { "value": 1, "label": "汉族" },
				  { "value": 2, "label": "回族" },
				  { "value": 3, "label": "蒙古族" },
				  { "value": 4, "label": "满族" },
				  { "value": 5, "label": "朝鲜族" },
				  { "value": 6, "label": "赫哲族" },
				  { "value": 7, "label": "达斡尔族" },
				  { "value": 8, "label": "鄂温克族" },
				  { "value": 9, "label": "鄂伦春族" },
				  { "value": 10, "label": "东乡族" },
				  { "value": 11, "label": "土族" },
				  { "value": 12, "label": "撒拉族" },
				  { "value": 13, "label": "保安族" },
				  { "value": 14, "label": "裕固族" },
				  { "value": 15, "label": "维吾尔族" },
				  { "value": 16, "label": "哈萨克族" },
				  { "value": 17, "label": "柯尔克孜族" },
				  { "value": 18, "label": "锡伯族" },
				  { "value": 19, "label": "塔吉克族" },
				  { "value": 20, "label": "乌孜别克族" },
				  { "value": 21, "label": "俄罗斯族" },
				  { "value": 22, "label": "塔塔尔族" },
				  { "value": 23, "label": "藏族" },
				  { "value": 24, "label": "门巴族" },
				  { "value": 25, "label": "珞巴族" },
				  { "value": 26, "label": "羌族" },
				  { "value": 27, "label": "彝族" },
				  { "value": 28, "label": "白族" },
				  { "value": 29, "label": "哈尼族" },
				  { "value": 30, "label": "傣族" },
				  { "value": 31, "label": "傈僳族" },
				  { "value": 32, "label": "佤族" },
				  { "value": 33, "label": "拉祜族" },
				  { "value": 34, "label": "纳西族" },
				  { "value": 35, "label": "景颇族" },
				  { "value": 36, "label": "布朗族" },
				  { "value": 37, "label": "阿昌族" },
				  { "value": 38, "label": "普米族" },
				  { "value": 39, "label": "怒族" },
				  { "value": 40, "label": "德昂族" },
				  { "value": 41, "label": "独龙族" },
				  { "value": 42, "label": "基诺族" },
				  { "value": 43, "label": "苗族" },
				  { "value": 44, "label": "布依族" },
				  { "value": 45, "label": "侗族" },
				  { "value": 46, "label": "水族" },
				  { "value": 47, "label": "仡佬族" },
				  { "value": 48, "label": "壮族" },
				  { "value": 49, "label": "瑶族" },
				  { "value": 50, "label": "仫佬族" },
				  { "value": 51, "label": "毛南族" },
				  { "value": 52, "label": "京族" },
				  { "value": 53, "label": "土家族" },
				  { "value": 54, "label": "黎族" },
				  { "value": 55, "label": "畲族" },
				  { "value": 56, "label": "高山族" }
				];
				var mappingEthnic = {};
				ethnicData.map(function(item) {
					mappingEthnic[item.value] = item.label;
				});

				return data.map(function(item) {
					var newItem = item;
					newItem.sex = item.sex ? '男' : '女';
					newItem.lodging = item.lodging ? '住校' : '不住校';
					newItem.birthday = item.birthday.substr(0, 7);
					newItem.ethnic = mappingEthnic[item.ethnic];
					newItem.specialId = mappingSpecial[item.specialId] + ' - ' + types[item.type];
					newItem.status = mappingStatus[item.status] + (item.status === '3' ? ('：' + item.feedback) : '');

					newItem.situation = situationMapping[item.situation];
					newItem.citytown = item.citytown ? '城市户口' : '农业户口';
					newItem.residType = residTypeMapping[item.residType];
					return newItem;
				});
			}

			// 生成表格实体
			function funcMakeTable(response) {
				var errMsg = '';
				if (!response) errMsg = '没有可供预览的信息。';
				else if (!response.success) errMsg = response.msg;
				if (errMsg) {
					domPages.textContent = errMsg;
					return;
				}

				domPages.textContent = '正在生成表格, 请稍候..';

				var item = funcRender([response.user])[0];
				var html = '';

				console.log(item.id, item.name, item);

				html += '<div class="printPage">';
				html += domTemp.innerHTML;
				html += '</div>';
				domPages.innerHTML = html;

				for (var key in item) {
					var value = item[key];
					if (value === '' || value === undefined || value === null) continue;
					var doms = domPages.getElementsByClassName(key);
					if (doms.length === 0) continue;

					var dom = doms[doms.length - 1];
					if (dom.tagName === 'IMG')
						dom.src = basicUrl + 'upload/' + value + '?r=' + new Date().getTime();
					else dom.value = value;
				}
			}

			// 获取地址栏里的某一个参数的值
			function funcGetSearch(paramsName, isString) {
				var search = location.search;
				var errMsg = '';
				var paramsValue = '';
				var pos = search.indexOf(paramsName);
				if (pos === -1) errMsg = '地址栏参数不能为空';
				if (!errMsg) {
					paramsValue = search.substr(pos + paramsName.length + 1);
					var pos2 = paramsValue.indexOf('&');
					if (pos2 > 0) paramsValue = paramsValue.substr(0, pos2);
					if (!errMsg && paramsValue === '') errMsg = '地址栏参数不能为空';
					if (!errMsg && !isString && isNaN(paramsValue)) errMsg = '地址栏参数的值必须是一个数字';
				}
				if (errMsg) {
					if (isString) return { value: '', err: errMsg };
					else return { value: 0, err: errMsg };
				} else {
					if (isString) return { value: paramsValue, err: errMsg };
					else return { value: paramsValue - 0, err: errMsg };
				}
			}
		</script>
	</head>
	<body>
		<div id="printTemplate">
			<div class="title">长治市职业高级中学招生登记表</div>
			<table class="header">
				<tbody>
					<td>
						<label>报名号</label>
						<input class="signup" disabled />
					</td>
					<td align='right'>
						<label>准考证号</label>
						<input class="examCardNum" disabled />
					</td>
				</tbody>
			</table>
			<table class="table">
				<tbody>
					<tr>
						<th>姓名</th>
						<td><input class="name" disabled /></td>
						<th>性别</th>
						<td><input class="sex" disabled /></td>
						<td rowSpan="3">
							<img class="picture" src="" alt="" />
						</td>
					</tr>
					<tr>
						<th>出生年月</th>
						<td><input class="birthday" disabled /></td>
						<th>民族</th>
						<td><input class="ethnic" disabled /></td>
					</tr>
					<tr>
						<th>学生类别</th>
						<td><input class="situation" disabled /></td>
						<th>电话</th>
						<td>
							<div><input class="phone" disabled /></div>
							<div><input class="phoneBackup" disabled /></div>
						</td>
					</tr>
					<tr>
						<th>中考成绩</th>
						<td><input class="sum" disabled /></td>
						<th>身份证号</th>
						<td colspan="2"><input class="idCardNum" disabled /></td>
					</tr>
					<tr>
						<th>毕业学校</th>
						<td><input class="school" disabled /></td>
						<th>家庭住址</th>
						<td colSpan="2"><input class="address" disabled /></td>
					</tr>
					<tr>
						<th>准考证</th>
						<td>
							<img class="examCard" src="" alt="" />
						</td>
						<th>身份证</th>
						<td>
							<img class="idCardFace" src="" alt="" />
						</td>
						<td>
							<img class="idCardBack" src="" alt="" />
						</td>
					</tr>
					<tr>
						<th colSpan="3">报考专业</th>
						<th>是否住校</th>
						<th>备注</th>
					</tr>
					<tr>
						<td colSpan="3"><input class="specialId" disabled /></td>
						<td><input class="lodging" disabled /></td>
						<td><input class="remark" disabled /></td>
					</tr>
					<tr>
						<th colSpan="3">所在居住地</th>
						<th colspan="2">特长</th>
					</tr>
					<tr>
						<td colSpan="3"><input class="residType" disabled /></td>
						<td colspan="2"><input class="speciality" disabled /></td>
					</tr>
					<tr>
						<th>推荐教师</th>
						<td><input class="recommend" disabled /></td>
						<th>当前状态</th>
						<td colSpan="3"><input class="status" disabled /></td>
					</tr>
				</tbody>
			</table>
		</div>
		<div id="printPages"></div>
	</body>
</html>
